"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _utils = require("../utils");

var _tab = _interopRequireDefault(require("../tab"));

var _tabs = _interopRequireDefault(require("../tabs"));

var _field = _interopRequireDefault(require("../field"));

var _button = _interopRequireDefault(require("../button"));

var _coupon = _interopRequireDefault(require("../coupon"));

var _createNamespace = (0, _utils.createNamespace)('coupon-list'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1],
    t = _createNamespace[2];

var EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';

var _default2 = createComponent({
    model: {
        prop: 'code'
    },
    props: {
        code: String,
        closeButtonText: String,
        inputPlaceholder: String,
        enabledTitle: String,
        disabledTitle: String,
        exchangeButtonText: String,
        exchangeButtonLoading: Boolean,
        exchangeButtonDisabled: Boolean,
        exchangeMinLength: {
            type: Number,
            default: 1
        },
        chosenCoupon: {
            type: Number,
            default: -1
        },
        coupons: {
            type: Array,
            default: function _default() {
                return [];
            }
        },
        disabledCoupons: {
            type: Array,
            default: function _default() {
                return [];
            }
        },
        displayedCouponIndex: {
            type: Number,
            default: -1
        },
        showExchangeBar: {
            type: Boolean,
            default: true
        },
        showCloseButton: {
            type: Boolean,
            default: true
        },
        showCount: {
            type: Boolean,
            default: true
        },
        currency: {
            type: String,
            default: '¥'
        },
        emptyImage: {
            type: String,
            default: EMPTY_IMAGE
        }
    },
    data: function data() {
        return {
            tab: 0,
            winHeight: window.innerHeight,
            currentCode: this.code || ''
        };
    },
    computed: {
        buttonDisabled: function buttonDisabled() {
            return !this.exchangeButtonLoading && (this.exchangeButtonDisabled || !this.currentCode || this.currentCode.length < this.exchangeMinLength);
        },
        listStyle: function listStyle() {
            return {
                height: this.winHeight - (this.showExchangeBar ? 140 : 94) + 'px'
            };
        }
    },
    watch: {
        code: function code(_code) {
            this.currentCode = _code;
        },
        currentCode: function currentCode(code) {
            this.$emit('input', code);
        },
        displayedCouponIndex: 'scrollToShowCoupon'
    },
    mounted: function mounted() {
        this.scrollToShowCoupon(this.displayedCouponIndex);
    },
    methods: {
        onClickExchangeButton: function onClickExchangeButton() {
            this.$emit('exchange', this.currentCode); // auto clear currentCode when not use vModel

            if (!this.code) {
                this.currentCode = '';
            }
        },
        // scroll to show specific coupon
        scrollToShowCoupon: function scrollToShowCoupon(index) {
            var _this = this;

            if (index === -1) {
                return;
            }

            this.$nextTick(function () {
                var _this$$refs = _this.$refs,
                    card = _this$$refs.card,
                    list = _this$$refs.list;
                /* istanbul ignore next */

                if (list && card && card[index]) {
                    list.scrollTop = card[index].$el.offsetTop - 100;
                }
            });
        },
        genEmpty: function genEmpty() {
            var h = this.$createElement;
            return h("div", {
                "class": bem('empty')
            }, [h("img", {
                "attrs": {
                    "src": this.emptyImage
                }
            }), h("p", [t('empty')])]);
        },
        genExchangeButton: function genExchangeButton() {
            var h = this.$createElement;
            return h(_button.default, {
                "attrs": {
                    "plain": true,
                    "type": "danger",
                    "text": this.exchangeButtonText || t('exchange'),
                    "loading": this.exchangeButtonLoading,
                    "disabled": this.buttonDisabled
                },
                "class": bem('exchange'),
                "on": {
                    "click": this.onClickExchangeButton
                }
            });
        }
    },
    render: function render() {
        var _this2 = this;

        var h = arguments[0];
        var coupons = this.coupons,
            disabledCoupons = this.disabledCoupons;
        var count = this.showCount ? " (" + coupons.length + ")" : '';
        var title = (this.enabledTitle || t('enable')) + count;
        var disabledCount = this.showCount ? " (" + disabledCoupons.length + ")" : '';
        var disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount;
        var ExchangeBar = this.showExchangeBar && h("div", {
            "class": bem('exchange-bar')
        }, [h(_field.default, {
            "attrs": {
                "clearable": true,
                "border": false,
                "placeholder": this.inputPlaceholder || t('placeholder'),
                "maxlength": "20"
            },
            "class": bem('field'),
            "model": {
                value: _this2.currentCode,
                callback: function callback($$v) {
                    _this2.currentCode = $$v;
                }
            }
        }), this.genExchangeButton()]);

        var onChange = function onChange(index) {
            return function () {
                return _this2.$emit('change', index);
            };
        };

        var CouponTab = h(_tab.default, {
            "attrs": {
                "title": title
            }
        }, [h("div", {
            "class": bem('list', {
                'with-bottom': this.showCloseButton
            }),
            "style": this.listStyle
        }, [coupons.map(function (coupon, index) {
            return h(_coupon.default, {
                "ref": "card",
                "key": coupon.id,
                "attrs": {
                    "coupon": coupon,
                    "currency": _this2.currency,
                    "chosen": index === _this2.chosenCoupon
                },
                "nativeOn": {
                    "click": onChange(index)
                }
            });
        }), !coupons.length && this.genEmpty()])]);
        var DisabledCouponTab = h(_tab.default, {
            "attrs": {
                "title": disabledTitle
            }
        }, [h("div", {
            "class": bem('list', {
                'with-bottom': this.showCloseButton
            }),
            "style": this.listStyle
        }, [disabledCoupons.map(function (coupon) {
            return h(_coupon.default, {
                "attrs": {
                    "disabled": true,
                    "coupon": coupon,
                    "currency": _this2.currency
                },
                "key": coupon.id
            });
        }), !disabledCoupons.length && this.genEmpty()])]);
        return h("div", {
            "class": bem()
        }, [ExchangeBar, h(_tabs.default, {
            "class": bem('tab'),
            "attrs": {
                "border": false
            },
            "model": {
                value: _this2.tab,
                callback: function callback($$v) {
                    _this2.tab = $$v;
                }
            }
        }, [CouponTab, DisabledCouponTab]), h("div", {
            "class": bem('bottom')
        }, [h(_button.default, {
            "directives": [{
                name: "show",
                value: this.showCloseButton
            }],
            "attrs": {
                "round": true,
                "type": "danger",
                "block": true,
                "text": this.closeButtonText || t('close')
            },
            "class": bem('close'),
            "on": {
                "click": onChange(-1)
            }
        })])]);
    }
});

exports.default = _default2;